<template>
    <div class="bg">
        <div class="bg-color"></div>
        <div class="row">
            <div class="record" @click="toRecordPage">创作记录</div>
        </div>
        <div class="title">大空间VR视频一键生成</div>
        <div class="sub-title">一键呈现立体视界</div>
        <div class="swipe-top">
            <swiper
                v-if="dataList.length"
                :modules="moudles1"
                :initialSlide="0"
                :loop="swiper_options.loop"
                :speed="swiper_options.speed"
                :centeredSlides="swiper_options.centeredSlides"
                :navigation="true"
                @slideChange="swiperChange"
                @swiper="onSwiper"
                class="swiper"
            >
                <swiper-slide v-for="i in dataList">
                    <div class="swiper-container">
                        <img class="my_swiper_imgs" :src="i.src" alt="" />
                        <img
                            class="avator"
                            src="../../assets/ldh_head.jpg"
                            alt=""
                        />
                    </div>
                </swiper-slide>
            </swiper>
        </div>

        <!-- <div class="flex-1"></div> -->

        <div class="scroll-bg">
            <scroll-item
                v-for="(item, index) in dataList"
                :data="item"
                :index="index"
                :selectedIndex="selectedIndex"
                class="icon-item"
                @click="scrollItemClick"
            ></scroll-item>
        </div>

        <div class="btn" @click="toSelectImgPage">上传一张人像照</div>
    </div>
</template>

<script lang="ts" setup name="index">
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";

import {
    ROUTER_NAME_CLIP_PAGE,
    ROUTER_NAME_RECORD_PAGE,
    ROUTER_NAME_SELECT_IMG_PAGE,
} from "../../route";
import { useNoloStore } from "../../store";
import SwiperCore from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import {
    Navigation,
    Pagination,
    Autoplay,
    EffectCoverflow,
} from "swiper/modules";

import "swiper/less";
import "swiper/less/navigation";
import "swiper/less/pagination";
import "swiper/less/scrollbar";
import BannerItemModel from "../../types/scrollItem";
import ScrollItem from "../../components/ScrollItem.vue";

SwiperCore.use([Autoplay, Pagination, EffectCoverflow, Navigation]);

const store = useNoloStore();
const router = useRouter();
let mySwiper: any;

let moudles1 = [Pagination, EffectCoverflow, Navigation];
let swiper_options = reactive({
    speed: 500, //切换过渡速度
    loop: true,
    slidesPerView: "auto", //解决最后一张切换到第一张中间的空白
    centeredSlides: true, //设置slide居中
    spaceBetween: 0,
    navigation: {},
    pagination: {
        clickable: true,
        bulletClass: "swiper-pagination-bullet",
        bulletActiveClass: "swiper-pagination-bullet-active",
    },
});
const selectedIndex = ref(0); //当前选中的index
const onSwiper = (swiper: any) => {
    mySwiper = swiper;
};
const imageSrcLocal = (name: string) => {
    return new URL(`../../assets/${name}`, import.meta.url).href;
};

const swiperChange = (swiper: any) => {
    selectedIndex.value = swiper.realIndex;
};
const toSelectImgPage = () => {
    router.push({ name: ROUTER_NAME_SELECT_IMG_PAGE });
};
const toRecordPage = () => {
    router.push({ name: ROUTER_NAME_RECORD_PAGE });
};

const scrollItemClick = (selIndex: number) => {
    selectedIndex.value = selIndex;
    let toIndex = selIndex + 1;
    if (toIndex < 0) {
        toIndex = dataList.length - 1;
    } else if (toIndex >= dataList.length) {
        toIndex = 0;
    }
    mySwiper.slideTo(toIndex);
};

const dataList: BannerItemModel[] = [
    {
        src: "https://adminapi.nolovr.com:9080/v1/file/download/group1/M00/00/3D/rBHfnWYrZROAc_xvAAFZCmce6-k57..png",
        label: "成人男",
    },
    {
        src: "http://gips1.baidu.com/it/u=3874647369,3220417986&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280",
        label: "成人女",
    },
    {
        src: "http://gips3.baidu.com/it/u=4283915297,3700662292&fm=3028&app=3028&f=JPEG&fmt=auto?w=1440&h=2560",
        label: "儿童男",
    },
    {
        src: "http://gips2.baidu.com/it/u=2055042668,1190219470&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280",
        label: "儿童女",
    },
];
</script>

<style lang="less" scoped>
@import url(../../style/index.less);
.user-icon {
    width: 30px;
    height: 30px;
}
.bg {
    // padding-top: var(--van-nav-bar-height);
    // background-color: #f5f5f6;
    background-color: black;

    height: 100vh;
    --van-dialog-width: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    position: relative;
    padding: 10px 0;
    padding-bottom: 40px;

    .bg-color {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
        z-index: 0;
        opacity: 0.6;
        filter: blur(70px);
        background: linear-gradient(
            to right,
            #10192a 0%,
            rgba(63, 250, 67, 0.4) 100%
        );
    }
    .row {
        z-index: 1;
        display: flex;
        justify-content: end;
        width: 100vw;
        padding: 10px 14px;
        .record {
            width: 76px;
            height: 26px;
            border-radius: 13px;
            font-size: 13px;
            color: white;
            border: 1px solid;
            text-align: center;
            line-height: 26px;
            background-color: rgba(255, 255, 255, 0.15);
        }
    }
    .title {
        margin-top: 30px;
        z-index: 1;
        font-size: 30px;
        color: #e0ede0;
        font-weight: 700;
        font-style: italic;
    }
    .sub-title {
        z-index: 1;
        font-size: 14px;
        color: #e2ffe2;
    }
    .swipe-top {
        z-index: 1;
        width: 100vw;
        margin-top: 30px;
        .swiper {
            height: 320px;
            border-radius: 4px;
            cursor: pointer;
            .swiper-container {
                transform: translate3d(0, 0, 0);
            }
            &-container {
                position: relative;
                width: 60%;
                height: 100%;
                margin: 0 auto;
                border-radius: 20px;
                overflow: hidden;

                .my_swiper_imgs {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                .avator {
                    position: absolute;
                    left: 10px;
                    bottom: 10px;
                    width: 50px;
                    height: 50px;
                    object-fit: cover;
                    border-radius: 4px;
                    overflow: hidden;
                }
            }

            //重新设置 pagination 样式大小
            :deep(.swiper-button-prev) {
                width: 40px !important;
                height: 40px !important;
            }

            :deep(.swiper-button-next) {
                width: 40px !important;
                height: 40px !important;
            }

            //左右箭头的样式
            :deep(.swiper-button-next::after),
            :deep(.swiper-button-prev::after),
            :deep(.swiper-rtl) {
                color: white;
                width: 40px !important;
                height: 40px !important;
                background-color: rgba(63, 250, 67, 0.1);
                font-size: 18px;
                text-align: center;
                line-height: 40px;
                border-radius: 50%;
            }

            // 指示器normal状态
            :deep(.swiper-pagination-bullet) {
                width: 24px;
                height: 4px;
                background: rgba(255, 255, 255, 0.5);
                border-radius: 1px;
            }

            // 指示器激活状态
            :deep(.swiper-pagination-bullet-active) {
                background: #ff580a;
            }
            //重新设置指示器的位置
            :deep(.swiper-pagination-bullets) {
                text-align: right;
                padding-right: 24px;
                bottom: 16px;
            }
        }
    }

    .flex-1 {
        flex: 1;
    }
    .scroll-bg {
        width: 100vw;
        padding-left: 15px;
        margin-top: 50px;
        height: 100px;
        display: flex;
        flex-wrap: nowrap;
        .icon-item {
            display: inline-block;
            width: 60px;
            height: 60px;
            margin-right: 15px;
            .icon-item-img {
                width: 100%;
                height: 100%;
                border-radius: 12px;
            }
        }
    }
    .btn {
        width: 70%;
        height: 45px;
        margin: 10px auto;
        line-height: 45px;
        border-radius: 22px;
        color: black;
        font-size: 18px;
        text-align: center;
        background: linear-gradient(
            318deg,
            #21d7fe 0%,
            #42ffe1 47%,
            #c4ffba 100%
        );
    }
}
</style>
